
<template>
    <div>
        <div style="margin-bottom: 5px;" v-if="this.user.roleId!=2">
            <el-input v-model="no" style="width: 200px;" placeholder="请输入餐馆名!" suffix-icon="el-icon-search"
                      @keyup.entry.native="loadPost1"
            ></el-input>
            <el-button style="margin-left: 5px;" type="primary" @click="loadPost1">查询</el-button>
            <el-button type="success" @click="resetparam1">重置</el-button>
        </div>
        <div style="margin-bottom: 5px;" v-if="this.user.roleId==2">
            <el-input v-model="name" style="width: 200px;" placeholder="请输入菜名!" suffix-icon="el-icon-search"
                      @keyup.entry.native="loadPost"
            ></el-input>
            <el-input v-model="menutype" style="width: 200px;" placeholder="请输入菜品类型!" suffix-icon="el-icon-search"
                      @keyup.entry.native="loadPost"
            ></el-input>
            <el-button style="margin-left: 5px;" type="primary" @click="loadPost">查询</el-button>
            <el-button type="success" @click="resetparam">重置</el-button>
            <el-button style="margin-left: 5px;" type="primary" @click="add">新增</el-button>
        </div>

        <el-table :data="tableData"
                  :header-cell-style="{background: '#f2f5fc', color: '#555'}"
                  border

        >
            <el-table-column prop="id" label="ID" width="60">
            </el-table-column>
            <el-table-column prop="no" label="餐馆账号" width="140">
            </el-table-column>
            <el-table-column prop="name" label="菜名" width="140">
            </el-table-column>
            <el-table-column prop="price" label="价格" width="80">
                <template slot-scope="scope">
                    <span>￥{{scope.row.price}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="menutype" label="菜品类型" width="180">
            </el-table-column>
            <el-table-column prop="menutxt" label="菜品简介" width="180">
            </el-table-column>
            <el-table-column prop="imgurl" label="菜品图片" width="180">
                <template slot-scope="scope">
                    <img :src="'http://localhost:9099'+scope.row.imgurl" alt="" style="width: 100px;height: 80px;">
                </template>
            </el-table-column>
            <el-table-column prop="xnumber" label="销量" width="80">
            </el-table-column>
            <el-table-column prop="operate" label="操作" v-if="this.user.roleId==2">
                <template slot-scope="scope">
                    <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
                    <el-popconfirm
                            title="确定删除吗?"
                            @confirm="del(scope.row.id)"
                            style="margin-left: 5px"
                    >

                        <el-button slot="reference" size="small" type="danger">删除</el-button>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[2,4,8,16]"
                :page-size="pageSize"
                layout="total,sizes,prev,pager,next,jumper"
                :total="total"
        >


        </el-pagination>
        <el-dialog
                title="添加信息"
                :visible.sync="centerDialogVisible"
                width="40%"
                style="left: 60px;"
        >


            <el-form ref="form"  :model="form" label-width="80px">
                <!--                <el-form-item label="餐馆名" prop="no">-->
                <!--                    <el-col :span="14">-->
                <!--                        <el-input v-model="form.no"></el-input>-->

                <!--                    </el-col>-->
                <!--                </el-form-item>-->
                <el-form-item label="菜名" prop="name">
                    <el-col :span="14">
                        <el-input v-model="form.name"></el-input>

                    </el-col>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-col :span="14">
                        <el-input v-model="form.price"></el-input>

                    </el-col>
                </el-form-item>
                <el-form-item label="菜品类型" prop="menutype">
                    <el-col :span="14">
                        <el-input v-model="form.menutype"></el-input>

                    </el-col>
                </el-form-item>
                <el-form-item label="菜品介绍" prop="menutxt">
                    <el-col :span="14">
                        <el-input type="textarea" v-model="form.menutxt"></el-input>

                    </el-col>
                </el-form-item>
                <!--                <el-form-item label="菜品图片路径" prop="imgurl">-->
                <!--                    <el-col :span="14">-->
                <!--                        <el-input  v-model="form.imgurl"></el-input>-->

                <!--                    </el-col>-->
                <!--                </el-form-item>-->
                <el-form-item label="菜品图片">
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:9099/menulist/upload/"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="centerDialogVisible=false">取消</el-button>
                        <el-button type="primary" @click="save">确定</el-button>


                    </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "room-menuMange",
        data() {


            return {
                user:{},
                tableData: [],
                pageSize: 4,
                pageNum: 1,
                total: 0,
                name: '',
                menutype:'',
                no:'',
                centerDialogVisible: false,
                form: {
                    id: '',
                    no:'',
                    name: '',
                    price: '',
                    menutype: '',
                    menutxt:'',
                    imgurl:'',
                    xnumber:''

                },
                imageUrl: '',

                rules: {
                    name: [
                        {
                            required: true, message: '请输入账号 ', trigger: 'blur'
                        }],
                    price: [
                        {
                            required: true, message: '请输入价格 ', trigger: 'blur'
                        }],
                    menutype: [
                        {
                            required: true, message: '请输入菜品类型 ', trigger: 'blur'
                        }],
                    menutxt: [
                        {
                            required: true, message: '请输入菜品介绍 ', trigger: 'blur'
                        }]

                }
            }
        }, methods: {
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.form.imgurl=res.data;
                console.log(this.form.imgurl)
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            }
            ,
            resetForm() {
                this.$refs.form.resetFields();
                this.imageUrl='';
            },
            mod(row) {
                //赋值到表单

                this.centerDialogVisible = true;
                this.$nextTick(() => {
                    // this.resetForm();
                    this.form.id = row.id;
                    this.form.no = row.no;
                    this.form.name = row.name;

                    this.form.price = row.price;
                    this.form.menutype = row.menutype;
                    this.form.menutxt = row.menutxt;
                    this.imageUrl=this.$httpUrl+row.imgurl;


                })
            },
            del(id) {
                this.$axios.get(this.$httpUrl + '/menulist/del?id=' + id
                ).then(res => res.data).then(res => {
                    console.log(res)
                    /*       // console.log('你好!')
                           // console.log(res)*/
                    if (res.code == 200) {
                        this.$message({
                            message: '删除成功!',
                            type: 'success'
                        });
                        this.centerDialogVisible = false;
                        this.loadPost();
                        this.resetForm()

                    } else {
                        this.$message({
                            message: '删除失败!',
                            type: 'error'
                        });
                    }
                })
            },


            add() {

                this.centerDialogVisible = true;
                this.$nextTick(() => {
                   this.form.no=this.user.no;
                })

            }
            ,
            doSave() {
                this.$axios.post(this.$httpUrl + '/menulist/save', this.form
                ).then(res => res.data).then(res => {
                    console.log(res)
                    /*       // console.log('你好!')
                           // console.log(res)*/
                    if (res.code == 200) {
                        this.$message({
                            message: '添加成功!',
                            type: 'success'
                        });
                        this.centerDialogVisible = false;
                        this.loadPost();
                        this.resetForm()

                    } else {
                        this.$message({
                            message: '添加失败!',
                            type: 'error'
                        });
                    }
                })
            },
            doMod() {
                this.$axios.post(this.$httpUrl + '/menulist/update', this.form
                ).then(res => res.data).then(res => {
                    console.log(res)
                    /*       // console.log('你好!')
                           // console.log(res)*/
                    if (res.code == 200) {
                        this.$message({
                            message: '修改成功!',
                            type: 'success'
                        });
                        this.centerDialogVisible = false;
                        this.loadPost();
                        this.resetForm()

                    } else {
                        this.$message({
                            message: '添加失败!',
                            type: 'error'
                        });
                    }
                })
            },
            save() {
                this.$refs.form.validate((vaild) => {
                    if (vaild) {
                        if (this.form.id) {
                            this.doMod();
                        } else {
                            this.doSave();
                        }
                    } else {
                        console.log('submit err!')
                        return false;
                    }
                });


            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageNum=1;
                this.pageSize = val;
                if(this.user.roleId!=2){
                    this.loadPost1();
                }else {
                    this.loadPost();
                }

            }
            ,
            handleCurrentChange(val) {
                console.log(`当前页:${val}`);
                this.pageNum = val;
                if(this.user.roleId!=2){
                    this.loadPost1();
                }else {
                    this.loadPost();
                }
            }
            ,
            resetparam() {

                this.name = ''
                this.menutype = ''
            }
            ,resetparam1(){
                this.no=''
            }

            ,
            loadPost() {//获取数据的请求
                this.user=JSON.parse(sessionStorage.getItem('CurUser'));

                this.no=this.user.no;
                this.$axios.post(this.$httpUrl + '/menulist/listpagecc1', {
                        pageSize: this.pageSize,
                        pageNum: this.pageNum,
                        param: {
                            no:this.no,
                            name: this.name,
                            menutype:this.menutype,

                        }

                    }
                ).then(res => res.data).then(res => {
                    console.log(res)
                    /*       // console.log('你好!')
                           // console.log(res)*/
                    if (res.code == 200) {
                        this.tableData = res.data
                        this.total = res.total

                    } else {
                        alert('获取数据失败!')
                    }
                })


            },
            loadPost1() {//获取数据的请求
                // this.user=JSON.parse(sessionStorage.getItem('CurUser'));

                this.$axios.post(this.$httpUrl + '/menulist/listpagecc2', {
                        pageSize: this.pageSize,
                        pageNum: this.pageNum,
                        param: {
                            no:this.no,
                        }

                    }
                ).then(res => res.data).then(res => {
                    console.log(res)
                    /*       // console.log('你好!')
                           // console.log(res)*/
                    if (res.code == 200) {
                        this.tableData = res.data
                        this.total = res.total

                    } else {
                        alert('获取数据失败!')
                    }
                })


            },
        },
        beforeMount() {
            this.user=JSON.parse(sessionStorage.getItem('CurUser'));
            //this.loadGet();//启动页面获取数据信息方法
            if(this.user.roleId==2) {
                this.loadPost();//将得到的数据打包发送给
            }else {
                this.loadPost1();
            }

        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

